import VueRouter from "vue-router"
import IndexVue from "@/views/Index.vue";
import HomeVue from "@/views/Home.vue";
import DetailVue from '@/views/Detail.vue'
import GoodsVue from '@/views/Goods.vue'
import ListVue from '@/views/List.vue'
import LoginVue from '@/views/Login.vue'
import RegVue from '@/views/Register.vue'
import Com from '@/day03/Com.vue'
import Child1Vue from "@/day03/Child1.vue";

// 定义一个 路由表
const routes = [
    {
        path:'/',
        redirect: '/index'
    },
    {
        path:'/index',
        component : IndexVue
    },
    {
        path:'/home',
        component : HomeVue
    },
    {
        path: '/detail/:id',
        component : DetailVue,
        // 如果希望在路由传递过来的动态参数可以经由props接收
        props:true
    },
    {
        path:'/goods',
        component: GoodsVue
    },
    {
        path:'/list',
        name:'List',
        component: ListVue,
        children:[
            {
                path:'a',
                component: Child1Vue
            }
        ]
    },
    {
        path:'/login',
        name:'Login',
        component: LoginVue
    },
    {
        path:'/reg',
        name:'Reg',
        component: RegVue
    }
    ,
    {
        path:'/com/:id',
        name:'Com',
        component: Com
    },
    {
        path : '/meta',
        // 路由懒加载 ，如果使用 import 在当前的js中导入所有的 其它跟路由相关的组件，导致打包出来的 js 体积非常大
        // 会极大地影响页面在第一次加载时的速度
        // 一般都需要用到哪个组件，再加载
        component: ()=>import('../day03/Parent1.vue'),
        meta:{
            title:"meta1"
        },
        children : [
            {
                path: 'c',
                component : Child1Vue,
                meta:{
                    title: "Child"
                }
            }
        ]
    },
    {
        path : '/store',
        component : ()=>import('../day03/StoreStudy.vue')
    },{
        path:'/f',
        component : ()=>import('../day03/Filter.vue')
    },
    {
        path:'/m',
        component : ()=>import('../day03/Mixins.vue')
    },
    {
        path:'/t',
        component : ()=>import('../day03/Transtion.vue')
    }

]

// 需要一个路由对象
const router = new VueRouter({
    routes,
    mode: 'hash'
})

// 全局前置守卫 - 可以在里面通过一些逻辑判断，控制路由的访问逻辑
router.beforeEach((to,from,next)=>{
    // to     要跳转到哪个路由
    // from   从哪个路由开始跳转
    // console.log(to,from);
    console.log('全局前置守卫');

    // if(to.path == '/login'){
    //     next('/reg')
    // }
    // 如果希望能访问到下一个路由一定要调用一下next
    next();
})


// 全局解析守卫 - 在进入目标路由后触发
router.beforeResolve((to,from,next)=>{
    console.log('路由解析完成');
    // console.log(to,from);
    next();
})

// 全局后置守卫  --  在进入组件后调用
router.afterEach((to,from)=>{
    console.log('进入了组件');
})

export default router;